import useRequest from '../hooks/useRequest'
function Request(){
    //使用了一个自定义的hooks,传入URL地址
    let [data,pagination,setPagination] = useRequest('http://localhost:8000/api/users');
    //总条数除以每页的条数,向上取整就是总页数
    let totalPage = Math.ceil(data.total/pagination.pageSize);
    return (
        <>
          <table className='table table-striped'>
            <thead>
                <tr><td>ID</td><td>姓名</td></tr>
            </thead>
            <tbody>
                {
                    data?.list?.map(item=>(
                        <tr key={item.id}><td>{item.id}</td><td>{item.name}</td></tr>
                    ))
                }
            </tbody>
          </table>
          <nav>
              <ul className='pagination'>
                {
                    new Array(totalPage).fill(0).map((_,index)=>(
                        <li className={pagination.current===index+1?'page-item active':'page-item'} key={index}>
                            <button 
                              className='page-link' 
                              onClick={()=>setPagination({...pagination,current:index+1})}>{index+1}</button>
                        </li>
                    ))
                }
              </ul>
          </nav>
        </>
    )
}
export default Request;